{% extends "adminmain.html" %}

{% block title %}客户管理{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/admin_main.css') }}">
<link rel="stylesheet" href="{{ url_for('static',filename='css/admin_clientmanage.css') }}">
{% endblock %}

{% block content %}
<div class="dashboard-container">
    <!-- 面包屑导航 -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ url_for('admin.adminmain') }}">首页</a></li>
            <li class="breadcrumb-item active" aria-current="page">客户管理</li>
        </ol>
    </nav>
    
    <!-- 客户管理卡片 -->
    <div class="dashboard-card">
        <div class="card-header">
            <h2><i class="bi bi-people me-2"></i>客户管理</h2>
            <div class="card-actions">
                <button class="btn btn-success" id="addCustomerBtn">
                    <i class="bi bi-person-plus me-1"></i>添加客户
                </button>
                <button class="btn btn-primary" id="exportCsvBtn">
                    <i class="bi bi-file-earmark-arrow-down me-1"></i>导出CSV
                </button>
            </div>
        </div>

        <!-- 搜索区域 -->
        <div class="search-section mb-4">
            <div class="row g-3">
                <div class="col-md-6">
                    <input type="text" class="form-control" placeholder="输入客户编号" id="customerIdSearch">
                </div>
                <div class="col-md-6">
                    <input type="text" class="form-control" placeholder="输入身份证号" id="idCardSearch">
                </div>
                <div class="col-md-12">
                    <button class="btn btn-primary w-100" id="searchBtn">
                        <i class="bi bi-search me-1"></i>搜索客户
                    </button>
                </div>
            </div>
        </div>

        <!-- 客户表格 -->
        <div class="table-responsive">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>客户编号</th>
                        <th>客户姓名</th>
                        <th>身份证号</th>
                        <th>联系电话</th>
                        <th>联系地址</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for customer in customers %}
                    <tr>
                        <td>{{ customer.customerID }}</td>
                        <td>{{ customer.customerName }}</td>
                        <td>{{ customer.PID }}</td>
                        <td>{{ customer.telephone }}</td>
                        <td>{{ customer.address }}</td>
                        <td>
                            <button class="btn btn-sm btn-info view-btn" data-id="{{ customer.customerID }}">
                                <i class="bi bi-eye"></i> 查看
                            </button>
                            <button class="btn btn-sm btn-warning edit-btn" data-id="{{ customer.customerID }}">
                                <i class="bi bi-pencil"></i> 编辑
                            </button>
                            <button class="btn btn-sm btn-danger delete-btn" data-id="{{ customer.customerID }}">
                                <i class="bi bi-trash"></i> 删除
                            </button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- 分页控件 -->
        <nav class="mt-4">
            <ul class="pagination justify-content-center">
                {% if pagination.has_prev %}
                <li class="page-item">
                    <a class="page-link" href="{{ url_for('admin.admin_clientmanage', page=pagination.prev_num, customerIdSearch=customerIdSearch, idCardSearch=idCardSearch) }}">上一页</a>
                </li>
                {% else %}
                <li class="page-item disabled">
                    <a class="page-link" href="#">上一页</a>
                </li>
                {% endif %}

                {% for page_num in pagination.iter_pages() %}
                    {% if page_num %}
                        <li class="page-item {% if page_num == pagination.page %}active{% endif %}">
                            <a class="page-link" href="{{ url_for('admin.admin_clientmanage', page=page_num, customerIdSearch=customerIdSearch, idCardSearch=idCardSearch) }}">{{ page_num }}</a>
                        </li>
                    {% else %}
                        <li class="page-item disabled"><span class="page-link">...</span></li>
                    {% endif %}
                {% endfor %}

                {% if pagination.has_next %}
                <li class="page-item">
                    <a class="page-link" href="{{ url_for('admin.admin_clientmanage', page=pagination.next_num, customerIdSearch=customerIdSearch, idCardSearch=idCardSearch) }}">下一页</a>
                </li>
                {% else %}
                <li class="page-item disabled">
                    <a class="page-link" href="#">下一页</a>
                </li>
                {% endif %}
            </ul>
        </nav>
    </div>
</div>

<!-- 客户模态框 (添加/编辑) -->
<div class="modal fade" id="customerModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">添加新客户</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="customerForm">
                    <input type="hidden" id="customerId">
                    <div class="mb-3">
                        <label class="form-label">客户姓名</label>
                        <input type="text" class="form-control" id="customerName" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">身份证号</label>
                        <input type="text" class="form-control" id="idCard" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">联系电话</label>
                        <input type="tel" class="form-control" id="telephone" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">联系地址</label>
                        <textarea class="form-control" id="address" rows="3" required></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="saveCustomerBtn">保存客户</button>
            </div>
        </div>
    </div>
</div>

<!-- 客户详情模态框 -->
<div class="modal fade" id="customerDetailModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">客户详情</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row mb-4">
                    <div class="col-md-6">
                        <h5>基本信息</h5>
                        <ul class="list-group">
                            <li class="list-group-item"><strong>姓名：</strong> <span id="detailCustomerName"></span></li>
                            <li class="list-group-item"><strong>客户编号：</strong> <span id="detailCustomerId"></span></li>
                            <li class="list-group-item"><strong>身份证号：</strong> <span id="detailIdCard"></span></li>
                            <li class="list-group-item"><strong>电话：</strong> <span id="detailPhone"></span></li>
                            <li class="list-group-item"><strong>地址：</strong> <span id="detailAddress"></span></li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <h5>账户概览</h5>
                        <div class="card" id="accountOverview">
                            <div class="card-body">
                                <p class="text-muted">加载中...</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mb-4">
                    <h5>银行卡信息</h5>
                    <div class="table-responsive">
                        <table class="table table-bordered" id="bankCardsTable">
                            <thead>
                                <tr>
                                    <th>卡号</th>
                                    <th>币种</th>
                                    <th>余额</th>
                                    <th>状态</th>
                                    <th>开户日期</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td colspan="5" class="text-center">加载中...</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div>
                    <h5>最近交易记录</h5>
                    <div class="table-responsive">
                        <table class="table table-bordered" id="recentTransactionsTable">
                            <thead>
                                <tr>
                                    <th>交易日期</th>
                                    <th>交易类型</th>
                                    <th>交易金额</th>
                                    <th>备注</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td colspan="4" class="text-center">加载中...</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{{ url_for('static', filename='js/admin_main.js') }}"></script>
<script src="{{ url_for('static', filename='js/admin_clientmanage.js') }}"></script>
{% endblock %}